
<template>
  <!--
  el-form 表单组件
    -  :model="ruleForm"   表单绑定的数据对象
    -  :rules="rules"     校验规则
    -  ref="ruleForm"     获取当前组件的
    -  label-width="200px"  指的是表单元素 label 部分的宽度

  el-form-item 表单元素
    - label="用户名" 显示标题的
    - prop="name"   校验用的
 -->
  <el-row
    type='flex'
    justify="center"
    align="middle"
  >
    <el-col :span='8'>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
        <!-- 下面是两个按钮 -->
        <el-form-item>
          <!--
        primary  蓝色
        success  绿色
        danger   红色
        -->
          <el-button
            type='success'
            @click='startLogin'
          >登录</el-button>
          <el-button @click='resetForm'>重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <h1>我是login 的h1 </h1> -->
    </el-col>
  </el-row>

</template>

<script>
/* eslint-disable */

import axios from 'axios'

export default {
  data () {
    return {
      // 表单数据对象
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      // 校验规则
      rules: {
        // 校验用户名
        username: [
          // required: true,   必填(*)
          // 校验是否需要输入内容
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 校验格式
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 校验密码
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 开始登录
    startLogin () {
      // form组件   this.$refs.loginForm
      // validate : 校验方法
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) {
          return;
        }
        // 发送请求开始登录
        let res = await axios.post('http://localhost:8888/api/private/v1/login', this.loginForm)
        // console.log(res)
        if (res.data.meta.status === 200) {

          // 0. 保存token
          localStorage.setItem('token', res.data.data.token)

          // 1. 提示
          this.$message({
            message: '登录成功',
            type: 'success',
            duration: 800
          })

          //2. 跳转到home首页
          this.$router.push('/home')

        } else {

          this.$message({
            message: res.data.meta.msg,
            type: 'error',
            duration: 800
          })

        }
        // console.log('可以开始真正登录了');

        // axios.post('http://localhost:8888/api/private/v1/login', this.loginForm).then(res => {
        //   console.log(res);

        //   // 判断登录成功
        // if (res.data.meta.status === 200) {

        //   // 0. 保存token
        //   localStorage.setItem('token', res.data.data.token)

        //   // 1. 提示
        //   this.$message({
        //     message: '登录成功',
        //     type: 'success',
        //     duration: 800
        //   })

        //   //2. 跳转到home首页
        //   this.$router.push('/home')

        // } else {

        //   this.$message({
        //     message: res.data.meta.msg,
        //     type: 'error',
        //     duration: 800
        //   })

        // }

        // })
      });
    },
    // 重置表单 把数据恢复到之前
    resetForm () {
      this.$refs.loginForm.resetFields();
    }
  }
}
</script>

<style scoped>
/* html,
body,
#app {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
} */

.el-row {
  height: 100%;
  background: #2d434c;
}

.el-col {
  background: #fff;
  padding: 20px 30px;
  border-radius: 15px;
}

h1 {
  color: green;
}
</style>
